<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>蚩尤后裔</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
          integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {

            // 为验证码绑定单击事件
            $("#code").next().on("click", function () {
                $(this).attr("src", "/user/getCode?" + (new Date().getTime()));
            });

            // 为登陆按钮绑定单击事件
            $("#userSubmit").on("click", function () {
                $("#hit").text("");// 清空提示信息

                var loginName = $("#loginName").val();
                var pwd = $("#pwd").val();
                var code = $("#code").val();

                $.ajax({
                    url: "/user/login",
                    type: "POST",
                    data: {"loginName": loginName, "pwd": pwd, "code": code},
                    dataType: "json",
                    cache: false,
                    success: function (data) {
                        console.log(JSON.stringify(data));
                        if (data.code != 200) {
                            $("#hit").css("color","red");
                            $("#hit").text(data.message);
                        } else {
                            $("#hit").text(data.message);
                            $("#hit").css("color","green");
                        }
                    },
                    error: function (data) {
                        console.log(data);
                    }
                });
            });
        });
    </script>

</head>
<body style="width: 600px;margin-left: 200px">
<h5>蚩尤后裔</h5>

<form>
    <div class="form-group">
        <label for="loginName">用户名</label>
        <input type="text" class="form-control" id="loginName" style="display: inline;width: 80%">
    </div>
    <div class="form-group">
        <label for="pwd">密&nbsp;&nbsp;&nbsp;码</label>
        <input type="password" class="form-control" id="pwd" style="display: inline;width: 80%">
    </div>
    <div class="form-group">
        <label for="code">验证码</label>
        <input type="text" class="form-control" id="code" style="width: 60%;display: inline">
        <img src="user/getCode" style="display: inline"/>
        <small id="hit" class="form-text"></small>
    </div>
    <button type="button" id="userSubmit" class="btn btn-primary">提 交</button>
</form>

</body>
</html>